<template>
  <div class="profile-container">
    <!-- 使用通用头部组件 -->
    <AppHeader />

    <!-- 个人资料页面内容 -->
    <main class="profile-main">
      <div class="profile-wrapper">
        <!-- 个人信息头部 -->
        <div class="profile-info-header">
          <div class="cover-photo">
            <img :src="coverPhotoUrl" alt="封面照片" />
            <!-- 突出显示的更换封面按钮 -->
            <div class="cover-photo-edit" @click="triggerCoverPhotoUpload">
              <span class="edit-icon">📷</span>
              <span>更换封面</span>
            </div>
            <input 
              type="file" 
              ref="coverPhotoInput" 
              style="display: none" 
              accept="image/*" 
              @change="handleCoverPhotoChange"
            />
          </div>
          
          <div class="user-basic-info">
            <div class="avatar-section">
              <div class="avatar-wrapper">
                <img 
                  :src="userStore.user?.avatar || 'https://picsum.photos/id/1005/200/200'" 
                  alt="用户头像" 
                  class="profile-avatar"
                />
                <div class="avatar-edit" @click="triggerAvatarUpload">
                  <span class="edit-icon">📷</span>
                </div>
                <input 
                  type="file" 
                  ref="avatarInput" 
                  style="display: none" 
                  accept="image/*" 
                  @change="handleAvatarChange"
                />
              </div>
              <button class="edit-profile-button" @click="openEditModal">编辑资料</button>
            </div>
            
            <div class="user-details">
              <h2>{{ userStore.user?.nickname || '用户' }}</h2>
              <p class="username-display">{{ userStore.user?.username || '未设置' }}</p>
              <p class="user-bio">{{ userBio }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-number">258</span>
                  <span class="stat-label">关注</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">1,245</span>
                  <span class="stat-label">粉丝</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">36</span>
                  <span class="stat-label">投稿</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">23.5万</span>
                  <span class="stat-label">获赞</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人资料导航 -->
        <div class="profile-nav">
          <div class="nav-tabs">
            <button 
              class="nav-tab" 
              :class="{ active: activeTab === 'videos' }" 
              @click="activeTab = 'videos'"
            >
              投稿
            </button>
            <button 
              class="nav-tab" 
              :class="{ active: activeTab === 'likes' }" 
              @click="activeTab = 'likes'"
            >
              点赞
            </button>
            <button 
              class="nav-tab" 
              :class="{ active: activeTab === 'collections' }" 
              @click="activeTab = 'collections'"
            >
              收藏
            </button>
            <button 
              class="nav-tab" 
              :class="{ active: activeTab === 'history' }" 
              @click="activeTab = 'history'"
            >
              历史
            </button>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="profile-content">
          <!-- 投稿内容 -->
          <div v-if="activeTab === 'videos'" class="videos-section">
            <div class="video-grid">
              <div v-for="video in userVideos" :key="video.id" class="video-card">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" alt="视频封面" />
                  <span class="video-duration">{{ video.duration }}</span>
                </div>
                <div class="video-info">
                  <div class="video-title">{{ video.title }}</div>
                  <div class="video-meta">
                    <span class="video-views">{{ video.views }} 次观看</span>
                    <span class="video-date">{{ video.date }}</span>
                  </div>
                  <div class="video-stats">
                    <span class="stat-item">{{ video.likes }} 点赞</span>
                    <span class="stat-item">{{ video.comments }} 评论</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 点赞内容 -->
          <div v-else-if="activeTab === 'likes'" class="likes-section">
            <div class="video-grid">
              <div v-for="video in likedVideos" :key="video.id" class="video-card">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" alt="视频封面" />
                  <span class="video-duration">{{ video.duration }}</span>
                </div>
                <div class="video-info">
                  <div class="video-title">{{ video.title }}</div>
                  <div class="video-channel">
                    <img :src="video.channel.avatar" alt="频道头像" />
                    <span class="channel-name">{{ video.channel.name }}</span>
                  </div>
                  <div class="video-meta">
                    <span class="video-views">{{ video.views }} 次观看</span>
                    <span class="video-date">{{ video.date }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 收藏内容 -->
          <div v-else-if="activeTab === 'collections'" class="collections-section">
            <div class="collection-lists">
              <div v-for="collection in collections" :key="collection.id" class="collection-item">
                <div class="collection-cover">
                  <div class="collection-preview">
                    <img v-for="(img, index) in collection.previewImages" :key="index" :src="img" alt="收藏预览" />
                  </div>
                </div>
                <div class="collection-info">
                  <h3 class="collection-title">{{ collection.title }}</h3>
                  <p class="collection-count">{{ collection.count }} 个视频</p>
                  <p class="collection-date">创建于 {{ collection.date }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 历史记录 -->
          <div v-else-if="activeTab === 'history'" class="history-section">
            <div class="history-list">
              <div v-for="item in historyItems" :key="item.id" class="history-item">
                <div class="history-thumbnail">
                  <img :src="item.thumbnail" alt="历史视频封面" />
                  <span class="video-duration">{{ item.duration }}</span>
                </div>
                <div class="history-info">
                  <div class="video-title">{{ item.title }}</div>
                  <div class="video-channel">
                    <span class="channel-name">{{ item.channel.name }}</span>
                  </div>
                  <div class="video-meta">
                    <span class="video-views">{{ item.views }} 次观看</span>
                    <span class="history-date">观看于 {{ item.watchDate }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">帮助中心</a>
          <a href="#">隐私政策</a>
          <a href="#">用户协议</a>
        </div>
        <div class="copyright">
          © 2024 Noody. All Rights Reserved.
        </div>
      </div>
    </footer>
  </div>

  <!-- 编辑资料模态框 -->
  <div class="modal" v-if="isEditModalOpen" @click.self="closeEditModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>编辑个人资料</h3>
        <button class="close-button" @click="closeEditModal">×</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="saveProfile">
          <div class="form-group">
            <label for="nickname">昵称</label>
            <input 
              type="text" 
              id="nickname" 
              v-model="editForm.nickname" 
              placeholder="请输入昵称"
              required
            />
          </div>
          
          <div class="form-group">
            <label for="bio">个人简介</label>
            <textarea 
              id="bio" 
              v-model="editForm.bio" 
              placeholder="介绍一下自己吧..."
              rows="4"
            ></textarea>
          </div>
          
          <div class="form-actions">
            <button type="button" class="cancel-button" @click="closeEditModal">取消</button>
            <button type="submit" class="save-button">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import AppHeader from '../components/AppHeader.vue'

const router = useRouter()
const userStore = useUserStore()
const activeTab = ref('videos')
const userBio = ref('热爱动漫和游戏的普通爱好者，喜欢分享各种有趣的内容。')
const coverPhotoUrl = ref('https://picsum.photos/id/1039/1200/300')

// 编辑资料相关
const isEditModalOpen = ref(false)
const editForm = ref({
  nickname: '',
  bio: ''
})

// 文件上传相关
const coverPhotoInput = ref(null)
const avatarInput = ref(null)

// 模拟用户视频数据
const userVideos = [
  {
    id: 1,
    title: '【游戏实况】我的游戏日常#1',
    thumbnail: 'https://picsum.photos/id/1025/400/225',
    duration: '18:25',
    views: '1.2万',
    date: '1周前',
    likes: '1.5千',
    comments: '234'
  },
  {
    id: 2,
    title: '【动漫推荐】近期必看的五部番剧',
    thumbnail: 'https://picsum.photos/id/1028/400/225',
    duration: '12:40',
    views: '3.5万',
    date: '2周前',
    likes: '4.2千',
    comments: '567'
  },
  {
    id: 3,
    title: '【生活vlog】周末的一天',
    thumbnail: 'https://picsum.photos/id/1039/400/225',
    duration: '08:15',
    views: '8.7千',
    date: '3周前',
    likes: '956',
    comments: '123'
  }
]

// 模拟点赞视频数据
const likedVideos = [
  {
    id: 1,
    title: '【动画推荐】2024年必看的十部新番',
    thumbnail: 'https://picsum.photos/id/1015/400/225',
    duration: '12:30',
    views: '12.5万',
    date: '3天前',
    channel: {
      name: '动漫爱好者',
      avatar: 'https://picsum.photos/id/1012/50/50'
    }
  },
  {
    id: 2,
    title: '【游戏实况】最新热门游戏试玩',
    thumbnail: 'https://picsum.photos/id/1018/400/225',
    duration: '25:45',
    views: '8.7万',
    date: '1周前',
    channel: {
      name: '游戏达人',
      avatar: 'https://picsum.photos/id/1005/50/50'
    }
  },
  {
    id: 3,
    title: '【音乐翻唱】经典歌曲重新演绎',
    thumbnail: 'https://picsum.photos/id/1019/400/225',
    duration: '03:45',
    views: '23.1万',
    date: '2天前',
    channel: {
      name: '音乐小天后',
      avatar: 'https://picsum.photos/id/1027/50/50'
    }
  }
]

// 模拟收藏夹数据
const collections = [
  {
    id: 1,
    title: '我的动漫收藏',
    count: 25,
    date: '2023年10月15日',
    previewImages: [
      'https://picsum.photos/id/1025/200/112',
      'https://picsum.photos/id/1028/200/112',
      'https://picsum.photos/id/1039/200/112'
    ]
  },
  {
    id: 2,
    title: '游戏攻略合集',
    count: 18,
    date: '2023年11月20日',
    previewImages: [
      'https://picsum.photos/id/1015/200/112',
      'https://picsum.photos/id/1018/200/112',
      'https://picsum.photos/id/1019/200/112'
    ]
  },
  {
    id: 3,
    title: '学习资料',
    count: 12,
    date: '2024年1月5日',
    previewImages: [
      'https://picsum.photos/id/1022/200/112',
      'https://picsum.photos/id/1023/200/112',
      'https://picsum.photos/id/1024/200/112'
    ]
  }
]

// 模拟历史记录数据
const historyItems = [
  {
    id: 1,
    title: '【科技评测】最新手机全面体验',
    thumbnail: 'https://picsum.photos/id/1059/400/225',
    duration: '32:15',
    views: '9.8万',
    watchDate: '今天 14:30',
    channel: {
      name: '科技前沿',
      avatar: 'https://picsum.photos/id/1006/50/50'
    }
  },
  {
    id: 2,
    title: '【美食教程】家常菜的高级做法',
    thumbnail: 'https://picsum.photos/id/1080/400/225',
    duration: '18:20',
    views: '15.3万',
    watchDate: '昨天 20:15',
    channel: {
      name: '美食家老王',
      avatar: 'https://picsum.photos/id/1011/50/50'
    }
  },
  {
    id: 3,
    title: '【旅行vlog】探索隐秘的自然风景',
    thumbnail: 'https://picsum.photos/id/1043/400/225',
    duration: '15:40',
    views: '7.2万',
    watchDate: '前天 16:45',
    channel: {
      name: '旅行者小明',
      avatar: 'https://picsum.photos/id/1009/50/50'
    }
  }
]

// 初始化时加载用户信息
onMounted(() => {
  userStore.loadUser()
  
  // 如果用户未登录，重定向到登录页
  if (!userStore.isLoggedIn) {
    router.push('/')
  }
  
  // 初始化编辑表单数据
  if (userStore.user) {
    editForm.value.nickname = userStore.user.nickname || ''
    editForm.value.bio = userBio.value
  }
  
  // 从localStorage加载封面图片URL
  const savedCoverPhoto = localStorage.getItem('userCoverPhoto')
  if (savedCoverPhoto) {
    coverPhotoUrl.value = savedCoverPhoto
  }
})

// 用户菜单相关功能已在AppHeader组件中实现

// 编辑资料相关函数
const openEditModal = () => {
  editForm.value.nickname = userStore.user?.nickname || ''
  editForm.value.bio = userBio.value
  isEditModalOpen.value = true
}

const closeEditModal = () => {
  isEditModalOpen.value = false
}

const saveProfile = () => {
  // 更新用户信息
  if (userStore.user) {
    userStore.user.nickname = editForm.value.nickname
    // 保存到localStorage
    localStorage.setItem('user', JSON.stringify(userStore.user))
  }
  
  // 更新个人简介
  userBio.value = editForm.value.bio
  
  // 关闭模态框
  isEditModalOpen.value = false
  
  // 这里可以添加成功提示
  alert('资料保存成功！')
}

// 更换封面图片
const triggerCoverPhotoUpload = () => {
  coverPhotoInput.value.click()
}



const handleCoverPhotoChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 这里使用FileReader来预览图片
    const reader = new FileReader()
    reader.onload = (e) => {
      coverPhotoUrl.value = e.target.result
      // 保存到localStorage，实现持久化
      localStorage.setItem('userCoverPhoto', e.target.result)
    }
    reader.readAsDataURL(file)
    
    // 实际项目中这里应该上传文件到服务器
    // 这里只是前端预览效果
    alert('封面图片已更新！')
  }
}

// 更换头像
const triggerAvatarUpload = () => {
  avatarInput.value.click()
}

const handleAvatarChange = (event) => {
  const file = event.target.files[0]
  if (file && userStore.user) {
    // 这里使用FileReader来预览图片
    const reader = new FileReader()
    reader.onload = (e) => {
      userStore.user.avatar = e.target.result
      // 保存到localStorage
      localStorage.setItem('user', JSON.stringify(userStore.user))
    }
    reader.readAsDataURL(file)
    
    // 实际项目中这里应该上传文件到服务器
    // 这里只是前端预览效果
    alert('头像已更新！')
  }
}
</script>

<style scoped>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 容器样式 */
.profile-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 - 与HomeView保持一致 */
.profile-header {
  background-color: white;
  border-bottom: 1px solid #e8f5e9;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: #4CAF50;
  margin: 0;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.main-nav ul {
  display: flex;
  list-style: none;
}

.main-nav li {
  margin: 0 15px;
}

.main-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 0;
  position: relative;
}

.main-nav a:hover {
  color: #4CAF50;
}

.user-actions {
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  margin-right: 20px;
}

.search-box input {
  width: 200px;
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
}

.search-button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 14px;
}

.notification-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  font-size: 20px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 12px;
  color: #666;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
}

.user-dropdown ul {
  list-style: none;
}

.user-dropdown li {
  padding: 0;
}

.user-dropdown a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.user-dropdown a:hover {
  background-color: #f5f5f5;
}

/* 个人资料主要内容 */
.profile-main {
  flex: 1;
}

.profile-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 个人信息头部 */
.profile-info-header {
  margin-bottom: 30px;
}

.cover-photo {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: -100px;
}

.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-basic-info {
  display: flex;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  padding-top: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-section {
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

.edit-profile-button {
  padding: 8px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.edit-profile-button:hover {
  background-color: #43A047;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  font-size: 24px;
  margin-bottom: 5px;
  color: #333;
}

.username-display {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
}

.user-bio {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

/* 个人资料导航 */
.profile-nav {
  background-color: white;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-tabs {
  display: flex;
  justify-content: center;
  padding: 0 30px;
}

.nav-tab {
  padding: 20px 30px;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.nav-tab:hover {
  color: #4CAF50;
}

.nav-tab.active {
  color: #4CAF50;
  font-weight: 500;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4CAF50;
}

/* 封面照片容器 */
.cover-photo {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 封面照片编辑按钮 */
.cover-photo-edit {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(76, 175, 80, 0.9); /* 使用更醒目的绿色背景 */
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 10;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cover-photo-edit:hover {
  background-color: rgba(67, 160, 71, 1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.cover-photo-edit:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.edit-icon {
  font-size: 16px;
}

/* 头像编辑功能 */
.avatar-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
}

.avatar-edit {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid white;
  transition: background-color 0.3s;
}

.avatar-edit:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 编辑资料模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9e9e9;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s;
}

.close-button:hover {
  background-color: #f0f0f0;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}

.cancel-button,
.save-button {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #666;
}

.cancel-button:hover {
  background-color: #e9e9e9;
}

.save-button {
  background-color: #4CAF50;
  color: white;
}

.save-button:hover {
  background-color: #43A047;
}

/* 内容区域 */
.profile-content {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 视频网格 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  overflow: hidden;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.video-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #999;
}

.video-channel {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.video-channel img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.channel-name {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 收藏夹样式 */
.collection-lists {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collection-item {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.collection-item:hover {
  background-color: #f0f0f0;
}

.collection-cover {
  width: 240px;
  height: 135px;
  margin-right: 20px;
}

.collection-preview {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 2px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.collection-preview img {
  flex: 1;
  height: 100%;
  object-fit: cover;
}

.collection-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.collection-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.collection-count {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.collection-date {
  font-size: 14px;
  color: #999;
}

/* 历史记录样式 */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.history-item {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.history-item:hover {
  background-color: #f0f0f0;
}

.history-thumbnail {
  width: 320px;
  height: 180px;
  margin-right: 20px;
  position: relative;
}

.history-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.history-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 页脚 */
.app-footer {
  background-color: #2c2c2c;
  color: #999;
  padding: 30px 0;
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  margin: 0 15px;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

.copyright {
  text-align: center;
  font-size: 14px;
}
</style>